<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品详情页</title>
    <link rel="stylesheet" href="../css/react.css" />
    <link rel="stylesheet" href="../css/page.css" />
    <link rel="stylesheet" href="../font/iconfont.css" />
  </head>
  <body>
    <!-- 头部 -->
    <div id="continer" class="bignav">
      <div class="continer nav">
        <div class="nav_left">
          <div class="index">
            <a href="./index.html"
              ><img src="../images/in_03.jpg" alt="首页" /><span
                >京东首页</span
              ></a
            >
          </div>
          <div class="map">
            <i class="iconfont icon-dingwei"></i>
            <span>深圳</span>
          </div>
        </div>
        <div class="nav_right">
          <div class="login">
            <span class="hello">你好，请登录</span><a href="#">免费注册</a>
          </div>
          <ul>
            <li><a href="#">我的订单</a></li>
            <li>
              <a href="#">我的京东</a><img src="../images/xia_09.jpg" alt="" />
            </li>
            <li><a href="#">京东会员</a></li>
            <li>
              <a href="#">企业采购</a><img src="../images/xia_09.jpg" alt="" />
            </li>
            <li>
              <a href="#">客户服务</a><img src="../images/xia_09.jpg" alt="" />
            </li>
            <li>
              <a href="#">网站导航</a><img src="../images/xia_09.jpg" alt="" />
            </li>
            <li><a href="#">手机京东</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 搜索 -->
    <div id="continer">
      <div class="continer shoping">
        <h1><img src="../images/re_03.jpg" alt="logo" /></h1>
        <div class="inp">
          <input type="text" value="百搭鞋" />
          <button class="btn1">搜本站</button>
          <button class="btn2">搜本店</button>
        </div>
        <a href="./shops.html" class="shop">
          <i class="iconfont icon-gouwuche"></i>
          <span class="shops">0</span>
          我的购物车
        </a>
      </div>
    </div>
    <!-- 商品详情 -->
    <div id="continer">
      <div class="continer bigbox">
        <div class="box">
          <!-- 放大镜 -->
          <div class="small">
            <div class="smbox">
              <img src="" alt="" />
              <span></span>
            </div>
            <ul class="list_tp"></ul>
            <div class="glass"></div>
          </div>
          <!-- 商品 -->
          <div class="bigshop">
            <p class="shopname">
              耐克 NIKE AIR HUARACHE CITY MOVE 女子运动鞋AO3172 AO3172-603 35.5
            </p>
            <div class="many">
              <div class="many_top">
                <span>京东价</span>
                <span class="danjia">￥<i></i></span>
              </div>
              <div class="many_bottom">
                <span>优惠价</span><span>满3000享九折</span>
              </div>
            </div>
            <div class="hope">
              <span>服务支持</span>
              <li><img src="../images/hope_07.jpg" alt="放心购" /></li>
              <li>送运费险</li>
              <li>闪电退款</li>
              <li>急速审核</li>
            </div>
            <div class="size">
              <span>选择尺码</span>
              <ul>
                <li>35码(22.5cm)</li>
                <li>36码(23.0cm)</li>
                <li>37码(23.5cm)</li>
                <li>38码(24.0cm)</li>
                <li>39码(24.5cm)</li>
                <li>40码(25.0cm)</li>
              </ul>
            </div>
            <div class="buy">
              <div class="left">
                <input
                  type="type"
                  value="1"
                  class="shuliang"
                  oninput="value=value.replace(/[^\d]/g,'')"
                />
                <span class="jia">+</span>
                <span class="jian">-</span>
              </div>
              <div class="right">
                加入购物车
              </div>
              <div class="toright">
                立即购买
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="../js/jquery-3.4.1.min.js"></script>
  <script src="../js/Ajax.js"></script>
  <script src="../js/cookie.js"></script>
  <script>
    var url = window.location.search;
    var reg = /id=(\d+)/;
    var id = url.match(reg)[1];
    setAjax({
      url: "../server/page.php",
      data: {
        id: id
      },
      type: "post",
      success: function(res) {
        if (res.status == 200) {
          var data = res.data;
          $(".bigshop .shopname").text(data.name);
          var arr = data.imgs.split("====");
          $(".small .smbox img").attr("src", arr[0]);
          $(".bigshop .danjia i").text(data.many);
          $(".small .glass").css("background-image", `url(${arr[0]})`);
          $(".small .glass").css("background-repeat", `no-repeat`);
          $(".small .glass").css("background-size", `1000px 1000px`);
          var str = "";
          for (var i = 0; i < arr.length; i++) {
            str += `<li>
                <a href="#">
                  <img src="${arr[i]}" alt="">
                </a>
             </li>`;
          }
          document.querySelector(".small .list_tp").innerHTML = str;
          function loupe() {
            //放大镜效果
            function Fyc(className) {
              this.smbox = document.querySelector("." + className);
              this.move = this.smbox.querySelector("span");
              this.glass = document.querySelector(".small .glass");
              this.uls = document.querySelectorAll(".small .list_tp li");
              this.look();
              this.photo();
              this.getmove();
            }
            Fyc.prototype.fangda = function(l, h) {
              var x = (1000 * l) / this.smbox.offsetWidth;
              var y = (1000 * h) / this.smbox.offsetHeight;
              this.glass.style.backgroundPosition = `-${x}px -${y}px`;
            };
            Fyc.prototype.getmove = function() {
              var _this = this;
              this.smbox.onmousemove = function(e) {
                var e = e || window.event;
                var x = e.pageX;
                var y = e.pageY;
                var l =
                  e.pageX -
                  _this.smbox.offsetLeft -
                  _this.smbox.parentElement.offsetLeft -
                  _this.move.clientHeight / 2;
                if (l < 0) {
                  l = 0;
                }
                if (l >= _this.smbox.offsetWidth - _this.move.offsetWidth) {
                  l = _this.smbox.offsetWidth - _this.move.offsetWidth;
                }
                var h =
                  e.pageY -
                  _this.smbox.offsetTop -
                  _this.smbox.parentElement.offsetTop -
                  _this.move.clientHeight / 2;
                if (h <= 0) {
                  h = 0;
                }
                if (h >= _this.smbox.offsetHeight - _this.move.offsetWidth) {
                  h = _this.smbox.offsetHeight - _this.move.offsetWidth;
                }
                _this.move.style.left = l + "px";
                _this.move.style.top = h + "px";
                //调用放大镜方法
                _this.fangda(l, h);
              };
            };

            Fyc.prototype.photo = function() {
              for (let i = 0; i < this.uls.length; i++) {
                this.uls[i].onmouseover = () => {
                  var url = this.uls[i]
                    .querySelector("a img")
                    .getAttribute("src");
                  this.smbox.querySelector("img").src = url;
                  this.glass.style.background = `url(${url}) no-repeat left top `;
                  this.glass.style.backgroundSize = `1000px 1000px`;
                };
              }
            };
            Fyc.prototype.look = function() {
              this.smbox.onmouseover = () => {
                this.move.style.display = "block";
                this.glass.style.display = "block";
                this.getmove();
              };
              this.smbox.onmouseout = () => {
                this.move.style.display = "none";
                this.glass.style.display = "none";
              };
            };
            var fyc = new Fyc("smbox");
          }
          loupe();
        }
      }
    });
    //加入购物车
    var uname = getCookie("username");
    if (uname) {
      var data = localStorage.getItem(uname);
      data = JSON.parse(data);
      if (data) {
        $(".shops").text(data.length);
      } else {
        $(".shops").text("0");
      }
      $(".hello").text("欢迎 " + uname);
      $(".hello").css({
        fontSize: "16px",
        fontWeight: "bold",
        color: "green"
      });
    } else {
      $(".hello").text("你好，请登录");
    }

    $(".hello").click(function() {
      if ($(".hello").text() == "你好，请登录") {
        location.href = "./login.html";
      }
    });
    //商品加
    $(".buy .jia").click(function() {
      if (uname) {
        document.querySelector(".shuliang").value++;
      } else {
        alert("请先登录");
        location.href = "./login.html";
        return false;
      }
    });
    //商品减
    $(".buy .jian").click(function() {
      if (uname) {
        document.querySelector(".shuliang").value--;
        if (document.querySelector(".shuliang").value <= 1) {
          document.querySelector(".shuliang").value = 1;
        }
      } else {
        alert("请先登录");
        location.href = "./login.html";
        return false;
      }
    });

    //存数据函数
    function record() {
      var data = localStorage.getItem(uname);
      data = JSON.parse(data);
      var sl = document.querySelector(".shuliang").value;
      // console.log(sl);

      sl = Number(sl);
      if (data) {
        var index = data.findIndex(function(v) {
          return v.id == id;
        });

        if (index >= 0) {
          var num = Number(data[index].number);
          data[index].number = num + sl;
        } else {
          var obj = {
            username: uname,
            id: id,
            number: sl
          };
          data.push(obj);
        }
        localStorage.setItem(uname, JSON.stringify(data));
        $(".shops").text(data.length);
      } else {
        var num = $(".shuliang").val();
        var data = [];
        var obj = {
          username: uname,
          id: id,
          number: num
        };
        data.push(obj);
        localStorage.setItem(uname, JSON.stringify(data));
        $(".shops").text(data.length);
      }
    }

    $(".buy .right").click(function() {
      if (uname) {
        record();
      } else {
        alert("请先登录");
        location.href = "./login.html";
        return false;
      }
    });
    //跳转购物车
  </script>
</html>
